
<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <p>支付</p>
    </header>
    <div id="timeout" style="color: red;margin-top: 200px;font-size: 20px;">

    </div>
    <div style="margin-top: 200px;color: red;">
     订单号: {{ out_trade_no }} ,应支付金额：{{total_fee}}
    </div>
     <div id="qrcode" style="margin:auto 400px;padding-top: 200px">

    </div>
    <!-- 底部菜单部分 -->
    <Footer></Footer>
  </div>
</template>


<script>
import QRCode from 'qrcodejs2' 
import Footer from "../components/Footer.vue";
export default {
    name: 'payQrcode',
 
    data() { 
        return {
            payAddress: '',
          total_fee: this.$route.query.total_fee,
          orderId:this.$route.query.orderId,
          out_trade_no: '',
          user: {}
        }
    },
  created() {
    //取出当前登陆用户对象
    this.user = this.$getSessionStorage("user"); //取出登陆的用户
      
        this.$axios.post('pay/createNative',this.$qs.stringify({
				total_fee:this.total_fee
        })).then(response => { 
          this.payAddress = response.data.qrcode
            this.out_trade_no=response.data.out_trade_no
          this.qrcode(); //生成了二维码
          this.queryPayStatus();  //查询支付的状态
        })
    },
  methods: {
      //生成二维码
        qrcode() { 
            let qrcode = new QRCode('qrcode', {
                width: 400,
                height: 400,
                text: this.payAddress,
                // colorDark: 'red',
                // colorLight: 'green'
            })
    },
    //检测支付状态
    queryPayStatus() { 
      this.$axios.post('pay/queryPayStatus', this.$qs.stringify({
        out_trade_no:this.out_trade_no
      })).then(response => { 
        if (response.data.success) {
          //支付成功了
          //更新订单状态为已支付
          this.updateOrderStatuesById();
          //插入支付日志

          this.insertPayLog();

          //支付成功跳转到支付成功页面
          this.$router.push({ path: '/paySuccess', query: { total_fee: this.total_fee } });
          
        } else { 
          if (response.data.message=='二维码超时') {
            //document.getElementById('timeout').innerHTML = '二维码已过期，刷新页面重新获取二维码';
            alert('二维码已过期，刷新页面重新获取二维码');
            //重新生成二维码
            document.getElementById('qrcode').innerHTML = ''; //清空原有的二维码
            this.qrcode();
          } else { 
            //支付失败了
          this.$router.push({path:'/payFail'});
          }
        }
      })
    },
    //更新订单状态为已支付
    updateOrderStatuesById() { 
      this.$axios.post('OrdersController/updateOrderStatusById', this.$qs.stringify({
        orderId: this.orderId
      })).then(response => { 
        if (response.data > 0) {
          console.log("修改订单状态为已支付成功");

          //增加一条支付日志:
          
        } else { 
          console.log("修改订单状态为已支付失败");
        }
      })
    },
    //定义插入支付日志
    insertPayLog(){ 
      this.$axios.post('PayLogController/savePayLog', this.$qs.stringify({
        userId: this.user.userId,
        orderId: this.orderId,
        payTime: new Date().toLocaleDateString(),
        payMoney:this.total_fee
      })).then(response => { 
        if (response.data > 0) {
          console.log('插入支付日志成功');
        } else { 
          console.log('插入支付日志失败');
        }
      })
    }
        
    },
  components: {
    Footer,
  },
}
</script>

<style scoped>
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #0097ff;
  color: #fff;
  font-size: 4.8vw;

  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;

  display: flex;
  justify-content: center;
  align-items: center;
}
</style>